<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/record.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend>提现统计</legend>
        <div class="layui-field-box">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">搜索条件</div>
                        <div class="layui-card-body" pad15>
                            <div class="layui-form-item">
                                <label class="layui-form-label">搜索时间</label>

                                <div class="layui-input-block">
                                    <button class="layui-btn {if condition='$status eq 0'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="0">全部
                                    </button>

                                    <button class="layui-btn {if condition='$status eq 1'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="1">今天
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 2'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="2">本周
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 3'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="3">本月
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 4'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="4">本年
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 5'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm" id="custom">自定义
                                    </button>
                                    <div class="layui-btn {if condition='$status eq 5'}layui-btn-disabled{else/}layui-btn-primary layui-hide{/if} layui-btn-sm" id="test">
                                        {$dateTime}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            总提现人数
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">人</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.wholeUser}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            总提现笔数
                            <span class="layui-badge layuiadmin-badge layui-bg-cyan">笔</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.stroke}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            本月提现人数
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">人</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.benUser}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            本月提现笔数
                            <span class="layui-badge layuiadmin-badge layui-bg-cyan">笔</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.benStroke}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            本月提现金额
                            <span class="layui-badge layuiadmin-badge layui-bg-orange">元</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.benMoney}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            上月提现人数
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">人</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.upUser}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            上月提现笔数
                            <span class="layui-badge layuiadmin-badge layui-bg-cyan">笔</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.upStroke}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            上月提现金额
                            <span class="layui-badge layuiadmin-badge layui-bg-orange">元</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$record.upMoney}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">提现统计</div>
                        <div class="layui-card-body" pad15>
                            <div id="main" style="width: 100%;height: 400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">提现方式</div>
                        <div class="layui-card-body" pad15>
                            <div id="main2" style="width: 100%;height: 400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script type="text/javascript" src="/static/layuiadmin/layui/layui.js"></script>
<script src="/static/js/echarts.js"></script>
<!-- 引入 walden 主题 -->
<script src="/static/theme/walden.js"></script>
<script>
    layui.config({
        version: true,
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate'], function () {
        var $ = layui.jquery,
                laydate = layui.laydate;

        $('#custom').on('click', function(e){ //假设 test1 是一个按钮
            $("#test").removeClass('layui-hide');//外部事件调用
            laydate.render({
                elem: '#test'
                ,show: true //直接显示
                ,range: true
                ,closeStop: '#custom' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
                ,done: function(value){
                    window.location.href = '/admin/Record/cash_statistics/status/5/dateTime/' + value;
                }
            });
        });

        //条件
        $(".status").click(function () {
            var status = $(this).data('status');
            window.location.href = '/admin/Record/cash_statistics/status/' + status;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'walden');
        var myChart2 = echarts.init(document.getElementById('main2'), 'walden');
        var data = '{$data}';
        data = JSON.parse(data);
        var arr = data.arr; //提现统计
        var type = data.type; //方法统计
        var dateList = []; //时间
        var valueMoney = []; //总金额
        var valueCount = []; //总人数
        for (var i in arr) {
            dateList.push(i);
            valueMoney.push(arr[i].money);
            valueCount.push(arr[i].count);
        }
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];
        var app = {};
        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: echarts.util.reduce(posList, function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };
        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };
        var labelOption = {
            normal: {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            }
        };
        var option = {
            title: {
                text: '提现金额和人数统计图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['提现金额', '人数']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [{
                type: 'category',
                axisTick: {show: false},
                data: dateList
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '提现金额',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: valueMoney
            },{
                name: '人数',
                type: 'bar',
                label: labelOption,
                data: valueCount
            }]
        };
        var data2 = genData(type);
        var option2 = {
            title : {
                text: '提现方式分布图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data2.legendData,
                selected: data2.selected
            },
            series : [
                {
                    type: 'pie',
                    radius : '55%',
                    data: data2.seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        function genData(type) {
            var legendData = [];
            var selected = {};
            for (var i = 0; i < type.length; i++) {
                legendData.push(type[i].name);
                selected[type[i].name] = true;
            }
            return {
                legendData: legendData,
                seriesData: type,
                selected: selected
            };
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart2.setOption(option2);
    });
</script>
</body>
</html>